<template>
   <div id="home-page">
        <div class="homepageheader">
            <div class="homepageheader-left">
                <img src="../assets/logo.png" alt="">
                   DMS
                <i class="el-icon-rank" id="fullscreen" @click="changefullscreen()"></i>
            </div>

            <div class="homepageheader-right">
                <el-dropdown  @command="handleCommand">
                    <span class="el-dropdown-link">
                        <i class="el-icon-user-solid"></i>
                        {{userName}}
                        <i class="el-icon-arrow-down el-icon--right"></i>
                        
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="logOut">
                            登出
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </div>

    <!-- 側欄.....-->
    <el-container style="height: 800px; border: 1px solid #eee">
        <el-aside width="200px" style="">
            <el-menu id="menu" class="el-menu-vertical-demo" :collapse="isCollapse" :collapse-transition="true">
            <el-submenu index="1" :class="{close:isCollapse}">
                <template slot="title">
                    <i  class="el-icon-user">
                    </i>管理員管理
                </template>
                <el-menu-item-group>
                
                <el-menu-item @click="goUserInfoPage()" index="1-1">管理員信息</el-menu-item>
                
                </el-menu-item-group>
                 
            </el-submenu>
            <el-submenu index="2" :class="{close:isCollapse}">
                <template slot="title"><i class="el-icon-s-home">
                    </i>歌手管理
                </template>
                <el-menu-item-group>
                
                <el-menu-item @click="goRoomTypePage()" index="2-1">歌手信息</el-menu-item>
              
                </el-menu-item-group>
               
            
            </el-submenu>
            <el-submenu index="3" :class="{close:isCollapse}">
                <template slot="title"><i class="el-icon-office-building">
                    </i>歌曲管理
                </template>
                <el-menu-item-group>
                   <el-menu-item @click="goBuildingPage()" index="3-1">歌曲信息</el-menu-item>
                </el-menu-item-group>
            </el-submenu>

            <el-submenu index="4" :class="{close:isCollapse}">
                <template slot="title">
                    <i class="el-icon-present">
                    </i>
                    歌單管理
                </template>
                <el-menu-item-group>
                   <el-menu-item @click="goGoodsTypePage()" index="4-1">歌單信息</el-menu-item>
                </el-menu-item-group>
            </el-submenu>

            <el-submenu index="5" :class="{close:isCollapse}">
                <template slot="title" >
                    <i @click="open()" class="el-icon-shopping-bag-1"></i>
                      用戶管理
                </template>
                <el-menu-item-group>
                   <el-menu-item @click="goGoodsPage()" index="5-1">用戶信息</el-menu-item>
                </el-menu-item-group>
            </el-submenu>

            
         
               



            </el-menu>
        </el-aside>
        
        
        <keep-alive include="firstPage">
            <router-view 
               @getUserName="receiveName"
               @addTab="addListSongTab"
            >
                <el-tabs  slot="all-header" v-model="editableTabsValue" 
                type="card"
                 closable 
                @tab-remove="removeTab"
                @tab-click="goPage()"
                >
                        <el-tab-pane
                            v-for="(item) in editableTabs"
                            :key="item.name"
                            :label="item.title"
                            :name="item.name"
                        >
                        </el-tab-pane>
                </el-tabs>
            </router-view>
        </keep-alive>
        
    </el-container>
    
   </div>
</template>

<script>
import UserInfo from '../components/User/UserInfo.vue'
export default {
   name:'homePage',
   components:{
    UserInfo
   },
   data() {
       return {
            isCollapse:false,
            userName:'',

            editableTabsValue: '1',
            editableTabs: [{
            title: '首頁',
            name: '1',
            }],
            tabIndex: 1,

            fullscreen:false,

            //存放router 路徑...
            router:[
                {
                    title:'首頁',
                    path:'/homepage/firstPage'
                }            
            ]
      } 
   },
   methods: {
       goUserInfoPage(){
           this.addTab('管理員信息',"/homepage/UserInfo")
           this.$router.push("/homepage/UserInfo");
       },
       goRoomTypePage(){
           this.addTab('歌手信息',"/homepage/roomTypeInfo")
           this.$router.push("/homepage/roomTypeInfo")
       },
       goBuildingPage(){
           this.addTab('歌曲信息',"/homepage/buildingInfo")
           this.$router.push("/homepage/buildingInfo")
       },
       goGoodsTypePage(){
           this.addTab('歌單信息','/homepage/goodsTypeInfo')
           this.$router.push('/homepage/goodsTypeInfo')
       },
       addListSongTab(id){
           this.addTab("歌單管理",'/homepage/ListSong?SongListId='+id)
           //this.$router.push('/homepage/')
       },
       
       goGoodsPage(){
           this.addTab('用戶信息','/homepage/goodsInfo')
           this.$router.push('/homepage/goodsInfo')
       },


       goMemberPage(){
           this.addTab('會員信息','/homepage/memberInfo')
           this.$router.push('/homepage/memberInfo')
       },
       goRoomPage(){
           this.addTab('客房信息','/homepage/roomInfo')
           this.$router.push('/homepage/roomInfo')
       }
       ,
       open(){
           
           this.isCollapse=!this.isCollapse
       },
       receiveName(name){
           //console.log(name);
           this.userName=name;
           if(this.userName!=''){
                this.$notify({
                        title: '登入成功',
                        message: '當前身份為:'+this.userName,
                        type: 'success',
                        duration:1000
                    });
           }
       },
       /**---------------------------------------------------------------- */
       //登出....
       /**
        * 右上角的登出頁面
        * 
        */
       handleCommand(command) {
          if(command=='logOut'){
              localStorage.removeItem('userInfo')
              this.$router.push('/login')
          }
      },
      /**---------------------------------------------------------------- */
      /**
       * @description 增加表項...
       * @param targetName 選項名稱
       * @param path       跳轉去的路徑...
       */
       addTab(targetName,path) {
         for (const key in this.editableTabs) {
             if(targetName==this.editableTabs[key].title){
                 return;
             }
         }
         for (const key in this.router) {
             if (targetName==this.router[key].title) {
                 return;
             }
         }
         this.router.push({
             title:targetName,
             path:path
         })
        
        let newTabName = ++this.tabIndex + '';
        console.log(targetName);
        this.editableTabs.push({
          title: targetName,
          name: newTabName,
        });
        this.editableTabsValue = newTabName;
      },
      /**---------------------------------------------------------------- */
      /**
       * @description 移走表項.....
       */
      removeTab(targetName) {
        let tabs = this.editableTabs;
        let activeName = this.editableTabsValue;

        // 此處是該選項的名字...
        let name=this.editableTabs[parseInt(targetName)-1].title;
        if (activeName === targetName) {
          tabs.forEach((tab, index) => {
            if (tab.name === targetName) {
              let nextTab = tabs[index + 1] || tabs[index - 1];
              if (nextTab) {
                activeName = nextTab.name;
              }
            }
          });  
        }
        this.editableTabsValue = activeName;
        /**
         * @description
         * 找出刪除的index....
         */
        let found=0;
        for (const key in this.editableTabs) {   
            //找到了index....
            if (name==this.editableTabs[key].title) {
                break;
            }
            found++
        }
         /**
         * 這步是過濾數組
         */
        this.router=this.router.filter(item=>{
            return item.title!==name
        });
        this.editableTabs = tabs.filter(tab => tab.name !== targetName);

        /**
         * @description
         * 這里是把數組後移...
         * 把name-1
         */
        for (const key in this.editableTabs) {
            if ( (parseInt(this.editableTabs[key].name)) > (found+1)) {
                
                let inde=parseInt(this.editableTabs[key].name)-1;
                this.editableTabs[key].name=(inde).toString();
            }
        }

        this.tabIndex--;

        /**
         * 刪了之後應該跳轉到前一頁...
         */
        //console.log(found);
        this.$router.push(this.router[found-1].path);
        
      },
      /**
       * @description 這個是用來跳轉頁面...
       */
      goPage(){
          let index=parseInt(this.editableTabsValue);
          index--;
           for (const key in this.router) {
               if (this.editableTabs[index].title==this.router[key].title) {
                    this.$router.push(this.router[key].path);
               }
           }   
      },
      changefullscreen(){
          if(this.fullscreen){
              document.exitFullscreen();
          }else{
              let elemnet=document.documentElement;
              if(elemnet.requestFullscreen){
                  elemnet.requestFullscreen()
              }
          }
          this.fullscreen=!this.fullscreen;
      }
      
   },
   mounted() {
       
   },
}
</script>

<style>
    /*
     .el-menu-vertical-demo:not(.el-menu--collapse) {
            width: 200px;
            min-height: 400px;
    }
    */

     #menu{
         height: 100%;
     }
     #home-page{
         width: 100%;
         height: 800px;
         position: relative;
         box-shadow: 0px 0px 5px;
     }
     .homepageheader{
         width: 100%;
         height: 60px;
         background-color: #3AA6FE;
         position: relative;
     }
     .homepageheader-left{
         height: 100%;
         width: 180px;
         padding-left: 20px;
         line-height: 60px;
         color: white;

         float: left;
     }
     .homepageheader-left i{
         font-size: 25px;
         line-height: 60px;
         cursor: pointer;
     }
     .homepageheader-right{
         height: 40px;
         width: 200px;
         padding-left: 20px;
         line-height: 60px;
         
         float: right;
     }
     .homepageheader-left img{
         padding-top: 10px;
         width: 50px;
         height: 50px;
         float: left;
         
     }
     .el-header {
    background-color: white;
    color: #333;
    line-height: 60px;
    }
    
    .el-aside {
        height: 740px;
    }

    #userlist{
        padding: 30px;
        padding-top: 10px;
    }
    .path-container{
        width: 100%;
        padding: 20px;
        padding-left: 40px;
    }
    .icon-text{
        font-style: normal;
        color: #303133;
    }
    .close .el-submenu__title{
        color: white;
    }
   
    #fullscreen{
        position: absolute;
        transform: rotateZ(45deg);
        right: 10px;
        color: black;
    }
   
</style>